<template>
<div class="registe-container">
  <var-app-bar color="#fff">
    <template #left>
      <var-button
        round
        text
        color="transparent"
        text-color="black"
        @click="goBack"
      >
        <var-icon name="chevron-left" :size="24" />
      </var-button>
    </template>
  </var-app-bar>
  <div class="registe-form-content">

<h1 style="margin-bottom: 10px;">注 册</h1>

<var-form ref="form" :disabled="disabled" :readonly="readonly">
  <var-space direction="column" :size="[18, 0]">
    <var-input
      placeholder="请输入用户名"
      :rules="[v => !!v || '用户名不能为空']"
      v-model="formData.username"
    />
    <var-input
      placeholder="请输入邮箱🏡"
      :rules="[v => !!v || '密码不能为空']"
      v-model="formData.email"
    />
    <var-input
      type="password"
      placeholder="请输入密码"
      :rules="[v => !!v || '密码不能为空']"
      v-model="formData.password"
    />
    <var-input
      type="password"
      placeholder="请再次输入密码"
      :rules="[v => !!v || '密码不能为空']"
      v-model="rePassword"
    />
    
  </var-space>
  <var-button block type="primary" style="margin-top: 30px;" @click="registe"
      :loading="isLoading">注册</var-button>
</var-form>

</div>
</div>
</template>

<script lang='ts' setup>
import router from '@/router';
import { Dialog } from '@varlet/ui';
import {ref, reactive, onMounted} from 'vue';
import {addUser, getAll} from "@/api/user";
import qs from 'Qs'

const goBack = () => {
  router.push('/');
}
const rePassword = ref('');
const formData = reactive({
  username: '',
  password: '',
  email: '',
})
const isLoading = ref(false)
const form = ref(null)
const disabled = ref(false)
const readonly = ref(false)

const registe = () => {

  if (formData.username === '') {
    Dialog('请输入用户名');
  } else if (formData.password === '') {
    Dialog('请输入密码');
  } else if (formData.password !== rePassword.value) {
    Dialog('两次密码输入不一致')
  } else {
    isLoading.value = true;
    let data = new FormData();
    data.set("username" , formData.username);
    data.set("password" , formData.password);
    data.set("email" , formData.email);

    addUser(data)
        .then((res) => {
          isLoading.value = true;
          if (res !== undefined) {
            Dialog("注册成功！，点击确定跳转到登录页面").then(() => {
                router.push('/loginForm')
            })
          }
        })
        .finally(() => {
          isLoading.value = false;
        })
  }
}
onMounted(() => {
  getAll().then(res => console.log(res))
})
</script>

<style scoped>
.registe-form-content{
  padding-left: 20px;
  padding-top: 20px;
  width: 90%;
}
</style>